<template>
	<view class="container">
		<uni-card class="card-detail" is-full>
			健康打卡
		</uni-card>		
		<view class="example">		
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<uni-forms-item label="健康码" prop="img1" required>
					 <view class="image-uploader">
					    <image v-if="form.img1" :src="form.img1" mode="aspectFit" @click="chooseImage('img1')"></image>
					    <view v-else @click="chooseImage('img1')">点击上传健康码</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="行程码" prop="img2" required>
				    <view class="image-uploader">
				        <image v-if="form.img2" :src="form.img2" mode="aspectFit" @click="chooseImage('img2')"></image>
				        <view v-else @click="chooseImage('img2')">点击上传行程码</view>
				    </view>
				</uni-forms-item>
				<uni-forms-item label="核酸报告" prop="img3" required>
				    <view class="image-uploader">
				        <image v-if="form.img3" :src="form.img3" mode="aspectFit" @click="chooseImage('img3')"></image>
				        <view v-else @click="chooseImage('img3')">点击上传核酸报告</view>
				    </view>
				</uni-forms-item>
				
				<uni-forms-item label="健康状况" name="type" required>
					<uni-data-checkbox v-model="form.type" :localdata="type"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="电话号码" name="phoneNumber" required>
					<uni-easyinput v-model="form.phoneNumber" type="text"></uni-easyinput>
				</uni-forms-item>	
			</uni-forms>	
			<view class="action-btn">
			<button @click="submit('handleinput')" class="login-btn cu-btn block bg-blue lg round">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {  addHealthreport } from "@/api/health/healthreport"
	import store from "@/store"
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {	
				type: [{
					text: '正常',
					value: 0
				}, {
					text: '异常',
					value: 1
				}],
				form: {
				        phoneNumber: '',
						type: 0,
				        img1: '',
				        img2: '',
				        img3: ''
				},
			
			}
		},
		computed: {
		    validateForm() {
		      const phoneReg = /^1[0-9]{10}$/; // 电话号码正则表达式
		      return phoneReg.test(this.form.phoneNumber);
		    },
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			chooseImage(imgField) {
			  uni.chooseImage({
			    count: 1,
			    success: (res) => {
			      //console.log(res);
			      let tempFilePath = res.tempFilePaths[0];
			      let date = new Date();
			      let year = date.getFullYear();
			      let month = (date.getMonth() + 1).toString().padStart(2,'0');
			      let day = date.getDate().toString().padStart(2,'0');
			      let hour = date.getHours();
			      let minute = date.getMinutes();
			      let second = date.getSeconds();
			      let randomNum = Math.floor(Math.random() * 1000);
			      let newName = `Lake_${year}${month}${day}${hour}${minute}${second}${randomNum}.png`;
			      let newPath = `/profile/upload/${year}/${month}/${day}/${newName}`;
			      uni.uploadFile({			
			        url: baseUrl + '/common/upload',
			        filePath: tempFilePath,
			        name: 'file',					
			        header: {
			           'Authorization': store.getters.token,
			        },
					form: {
					    filePath: newPath + newName
					},
			        success: (uploadRes) => {
			          console.log(uploadRes.data);
			          if (uploadRes.statusCode === 200) {
			            let responseData = JSON.parse(uploadRes.data);
			            let imageUrl = responseData.url;
			            this.form[imgField] = imageUrl;
						 
			          }
			        }
			      });
			    }
			  });
			},

			
			
			 submit() {

				let form = this.form;
				if (form.img1 === '') {
					uni.showToast({
						title: '请上传健康码',
							icon: 'none',
							duration: 2000
					});
					return;
				}
				if (form.img2 === '') {
					uni.showToast({
						title: '请上传行程码',
							icon: 'none',
							duration: 2000
					});
					return;
				}
				if (form.img3 === '') {
					uni.showToast({
						title: '请上传核酸报告',
							icon: 'none',
							duration: 2000
					});
					return;
				}	
				if (!this.validateForm) {
				    uni.showToast({
				        title: '请输入正确的电话号码',
				        icon: 'none',
				    });
					return;	
				}				 
				this.$refs.form.validate().then(res => {
					 addHealthreport(this.form).then(data => {
						 console.log(this.form)
						 this.loading = true
						 if (data.code === 200) {
						 	//console.log('1234567')
						     uni.showToast({
						 		title:'打卡成功',
								icon: 'none',
								duration: 2000
						     })
						 	setTimeout(() => {
						 	  uni.switchTab({
						 		url: '/pages/index'
						 	  })
						 	}, 1000)
						 }
						 
						 
					 }).catch(() => {
						 this.loading = false
					 })
				 }).catch(err =>{
					console.log('表单错误信息：', err);
				
				})	 
				 
			},
			   
						
			
			
		}
	}
</script>

<style lang="scss">
		.uni-forms-page {
		  padding: 20px;
		}

		.image-uploader {
		  width: 100px;
		  height: 100px;
		  border: 1px dashed #ccc;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  text-align: center;
		  font-size: 12px;
		  color: #666;
		}
		.example {
			padding: 15px;
			background-color: #fff;
		}
</style>
